<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp"%>
<title>用户登陆</title>
</head>
<body>
	<fieldset id="">
		<legend style="font-size: 25px; color: black">员工信息维护</legend>
		<div class="layui-form">
			<div class="layui-field-box">
				<!-- <form class="layui-form" > -->
				<div class="layui-form-item">
					<label class="layui-form-label">员工编号</label>
					<div class="layui-input-inline">
						<input type="text" name="code" placeholder="请输入编号"
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">员工姓名</label>
					<div class="layui-input-inline">
						<input type="text" name="name" placeholder="请输入姓名"
							autocomplete="off" class="layui-input">
					</div>

					<input type="button" id="selc" value="搜索" lay-submit
						lay-filter="search" class="layui-btn" /> <input
						onclick="openAdd()" type="button" value="添加" class="layui-btn"
						id="add1" />
				</div>

			</div>
			<input type="hidden" name="action" value="page"> <input
				type="hidden" name="pageIndex" value="1"> <input
				type="hidden" name="pageLimit" value="10">

		</div>
		<table style="" class=" layui-table">
			<thead>
				<tr>
					<th style="width: 10%; text-align: left;">ID</th>
					<th style="width: 10%; text-align: left;">员工编号</th>
					<th style="width: 10%; text-align: left;">姓名</th>
					<th style="width: 10%; text-align: left;">部门编号</th>
					<th style="width: 10%; text-align: left;">部门名称</th>
					<th style="width: 40%; text-align: left;">操作</th>
				</tr>
			</thead>
			<tbody id="tbody">

			</tbody>
		</table>
		<div id="pageInfoUser" style="text-align: right; padding-right: 30px"></div>
	</fieldset>
	<script type="text/javascript">
		//分页查询，请求employee，对搜索进行提交，返回数据类型是json，回调函数设置分页相关信息
		formSubmit("/employee", "submit(search)", "json", function(data) {
			console.log(data)
			var cur = $("input[name='pageIndex']").val();//获取默认第几页
			var limit = $("input[name='pageLimit']").val();//获取每一页的数据记录条数
			//调用setPage方法进行分页模块的渲染，参数分别是：渲染的标签的id(没有#),servlet返回的数据记录条数，上面获取的默认显示第几页
			//每一页显示多少条数据，jump回调函数
			setPageInfo('pageInfoUser', data.count, cur, limit, function(obj,
					first) {
				//获取显示第几页、每页显示多少条数据的参数值
				$("input[name='pageIndex']").val(obj.curr);
				/*这里设置每页的空间是多大*/
				$("input[name='pageLimit']").val(obj.limit);
				//如果当前不是第一页即不是第一次加载，则调用刷新页面搜索的方法
				if (!first) {
					refresh();
				}
			});
			//data是从后台查询得到的数据，json格式化的字符串
			var html = "";
			//遍历并解析data的list,即符合查询条件的记录
			/*这里根据查询的记录的条数，将每一页填充；规定每一页可以放几个记录，后台也需要规定查出几个记录（使用limit和两个参数）*/
			$.each(data.list, function(i, dom) {//i表示是json中的第几个，dom是json中的每一个格式化字符串，“.”后面跟是实体类中的字段名
				var code = dom.code ? dom.code : '';
				var name = dom.name ? dom.name : '';
				var code_dept = dom.codeDept ? dom.codeDept : '';
				///////这里不知道为啥写codeName,按照我的理解应该是deptName,但是浏览器控制台输出的就是codeName，晕
				var deptName = dom.codeName ? dom.codeName : '';
				//将json中的数据封装成对象，冒号前是模板中的属性，冒号后是上面取出的数据
// 				console.log(dom.deptName)
				var d = {
					i : i + 1,
					code : code,
					name : name,
					code_dept : code_dept,
					deptName : deptName
				}
				//把对象填充到模板中，
				html += getlaytpl("#tradd", d)
			})
			//把模板在tbody中显示出来
			$("#tbody").html(html);
			layer.msg("查询成功")
		})

		//点击菜单，自动查询所有信息
		refresh();
		function refresh() {
			$("input[value='搜索']").click();
		}
		//点击添加，弹出层
		function openAdd() {
			openlayer("/web/page/emp/add.jsp", refresh);
		}

		function del(code) {
			openConfirm(function() {
				// 				layer.msg("123")
				//				把删除请求发送给对应的servlet，发送请求时携带的参数（进行的操作、以及改行记录的编号），
				//				返回的数据的类型是text,回调函数判断删除是否成功
				ajax("/employee", {
					action : "del",
					code : code
				}, "text", function(data) {
					// 					console.log(data);
					if (1 == data) {
						layer.msg("删除成功", refresh)
					}
				})
			})
		}
		//点击修改按钮弹出 弹出层
		function openUpd(code) {
			// 			openlayer("/web/emp/upd.jsp?code="+code,refresh)//通过Ajax请求的方式回显
			openlayer("/employee?action=get2&code=" + code, refresh)//通过请求转发的方式，从域中把数据取出，回显
		}
		//重置密码
		function openResetPass(code) {
			openConfirm(function() {
				ajax("/employee", {
					action : "reset",
					code : code
				}, "text", function(data) {
					if (1 == data) {
						layer.msg("重置成功，密码是123456")
					}
				})
			})
		}

		function openSetDept(code) {
			openlayer("/web/page/emp/setDept.jsp?code=" + code, refresh)
		}
		
		function openUpImg(code){
			openlayer("/web/page/emp/upImage.jsp?code=" + code, refresh)

		}
		
	</script>

	<script type="text/html" id="tradd">
		<tr>
			<td>{{d.i}}</td>
			<td>{{d.code}}</td>
			<td>{{d.name}}</td>
			<td>{{d.code_dept}}</td>
			<td>{{d.deptName}}</td>
			<td>
				<a href='javascript:del("{{d.code}}");' class="layui-btn layui-btn-sm layui-btn-danger">
					<i class="layui-icon layui-icon-delete"></i>
				</a>&nbsp;&nbsp;
					<input type="button" onclick='openUpd("{{d.code}}")' class="layui-btn layui-btn-sm" value="修改"/>
					<input type="button" onclick='openResetPass("{{d.code}}")' class="layui-btn layui-btn-sm" value="密码重置"/>
					<input type="button" onclick='openSetDept("{{d.code}}")' class="layui-btn layui-btn-sm" value="设置部门"/>
					<input type="button" onclick='openUpImg("{{d.code}}")' class="layui-btn layui-btn-sm" value="上传头像"/>
			</td>
		</tr>
	</script>
</body>
</html>
